import React, { useRef, useState } from 'react'
import { Button } from 'antd'
// 引入高级布局
import { PageContainer } from '@ant-design/pro-layout'
import ProTable from '@ant-design/pro-table'
import type { ProColumns } from '@ant-design/pro-table'
import type { ProFormInstance } from '@ant-design/pro-form'
// 引入 service 请求函数
import { getPerson } from '@/services/person'
// 引入 connect，让UI组件与Model建立连接
import { connect } from 'umi'

export type TableListItem = {
  key: number;
  name: string;
}

const columns: ProColumns<TableListItem>[] = [
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    hideInSearch: true
  },
]

// 请求本地数据
// const data = [
//   { id: 1, name: 'Tom', age: 18 },
//   { id: 2, name: 'Jerry', age: 16 },
// ]
const personList = () => {
  // 使用service请求方法，发起请求
  // const data = await getPerson()

  // return { data: data }
}


const Person = (props) => {//使用props接收到person数据

  const ref = useRef<ProFormInstance>()
  const [collapsed, setCollapsed] = useState(false)

  console.log(props)
  // 请求Mock数据
  const personList = () => {
    // 使用service请求方法，发起请求
    // const data = await getPerson()

    const data = props.person.persons

    return { data: data }
  }

  return (
    <PageContainer>
      <ProTable<TableListItem>
        columns={columns}
        request={async () => personList()}
        rowKey="key"
        pagination={{
          showSizeChanger: true,
        }}
        search={{
          collapsed,
          onCollapse: setCollapsed,
        }}
        formRef={ref}
        toolBarRender={() => [
          <Button
            key="set"
            onClick={() => {
              if (ref.current) {
                ref.current.setFieldsValue({
                  name: 'test-xxx',
                });
              }
            }}
          >
            赋值
          </Button>,
          <Button
            key="submit"
            onClick={() => {
              if (ref.current) {
                ref.current.submit();
              }
            }}
          >
            提交
          </Button>,
        ]}
        options={false}
        dateFormatter="string"
        headerTitle="表单赋值"
      />
    </PageContainer>
  )
}

// export default Person
// 使用connect包裹UI组件
export default connect(({ person }) => ({ person: person }))(Person)
